버튼 컴포넌트, 스토리북 개발 완료 내용 필독#24
Conversation
Summary of ChangesHello @yooolleee, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 이 PR은 애플리케이션의 UI 일관성과 개발 효율성을 높이기 위해 포괄적인 버튼 컴포넌트 라이브러리를 도입합니다. 기본 버튼부터 특정 기능에 최적화된 버튼까지 다양한 유형을 제공하며, 각 컴포넌트는 Storybook을 통해 상세하게 문서화되어 있습니다. 또한, 개발 환경의 편의성을 위해 ESLint 설정이 조정되었고, 전역적인 스타일 관리를 위한 CSS 변수도 업데이트되었습니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Activity
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
전반적으로 버튼 컴포넌트와 스토리북이 체계적으로 잘 구성되었습니다. 특히 스토리북 문서화가 매우 상세하여 컴포넌트의 사용법을 이해하기 쉽습니다. 몇 가지 개선점을 제안드립니다.
AllVariantsDisabled스토리에서disabledprop이 누락된 부분이 있습니다.EditButton과ProgressButton의 CSS에서 색상 값이 하드코딩되어 있거나 정의되지 않은 변수를 사용하여 유지보수성을 해칠 수 있습니다. 디자인 시스템의 색상 변수를 사용하거나 새로운 변수를 추가하는 것을 권장합니다.EnterButton의aria-label을 더 범용적으로 만들면 재사용성이 향상될 것입니다.
| } | ||
|
|
||
| .button:hover { | ||
| background: var(--color-border-secondary); |
There was a problem hiding this comment.
:hover 상태에서 정의되지 않은 --color-border-secondary CSS 변수를 사용하고 있습니다. color.css에 정의된 변수로 교체하거나, 필요한 경우 새 변수를 정의해주세요.
| <BaseButton size="small" variant="danger"> | ||
| Danger | ||
| </BaseButton> |
There was a problem hiding this comment.
AllVariantsDisabled 스토리에서 small 사이즈 danger 버튼에 disabled prop이 누락되었습니다. 다른 버튼들과 일관성을 맞추고 스토리의 의도를 명확히 하기 위해 disabled prop을 추가하는 것이 좋습니다.
| <BaseButton size="small" variant="danger"> | |
| Danger | |
| </BaseButton> | |
| <BaseButton size="small" variant="danger" disabled> | |
| Danger | |
| </BaseButton> |
There was a problem hiding this comment.
“prop 누락” 지적은 버전·의도 차이에서 나오는 리뷰 성격이지, 버그나 결함은 아니라서 기능·설계·품질 관점에서는 문제없습니다
|
|
||
| .button:active { | ||
| transform: scale(0.95); | ||
| background: #b0bcc9; |
There was a problem hiding this comment.
:active 상태의 배경색으로 #b0bcc9가 하드코딩되어 있습니다. 유지보수성과 일관성을 위해 color.css에 정의된 디자인 시스템의 색상 변수를 사용하는 것을 권장합니다.
| background: #b0bcc9; | |
| background: var(--color-interaction-inactive); |
| className={styles.button} | ||
| onClick={onClick} | ||
| disabled={!active} // active가 false면 자동으로 disabled | ||
| aria-label="댓글 등록" |
There was a problem hiding this comment.
aria-label이 "댓글 등록"으로 하드코딩되어 있습니다. 이 버튼이 스토리북의 예시처럼 댓글 외에 채팅 메시지 전송, 검색 등 다양한 맥락에서 사용될 수 있으므로, "전송"과 같이 더 범용적인 용어를 사용하거나 aria-label을 prop으로 받아 유연하게 설정할 수 있도록 변경하는 것을 고려해보세요.
| aria-label="댓글 등록" | |
| aria-label="전송" |
There was a problem hiding this comment.
댓글 등록에 사용하는 도메인 맥락의 컴포넌트라 의미를 범용적으로 적기보다 더 명시적으로 적었지만 고쳐도 문제 안될 것 같아서 고쳐놨습니다.
| } | ||
|
|
||
| .button:hover:not(:disabled) { | ||
| background: #cbd5e1; |
There was a problem hiding this comment.
:hover 상태의 배경색으로 #cbd5e1이 하드코딩되어 있습니다. 유지보수성과 일관성을 위해 color.css에 정의된 디자인 시스템의 색상 변수를 사용하는 것을 권장합니다. 예를 들어, --color-interaction-inactive를 사용하거나 더 적절한 새 변수를 추가할 수 있습니다.
| background: #cbd5e1; | |
| background: var(--color-interaction-inactive); |
2 participants
Summary
feature/button 브랜치에서 개발을 했으나 테스트 페이지가 pr이 올라오면 안된다고 하여 브랜치를 새로파서 제외하고 올립니다.
-> feature/button-v2 브랜치임 즉, feature/button는 없음
스토리북 업로드시 jsx 부분에서 벡틱이나 쌍따옴표 같은 코드를 직접 쓰는걸 eslint(eslint.config.mjs)에서 막고있습니다. 그래서 엔티티 코드 ", “, < 와 같은 코드로 입력을 하라고 error 문구가 나오는데 스토리북 같은 경우 저희는 테스트 페이지로써 사용하는 용도라 스토리북에 한해서 eslint 제한을 해제하고 올립니다. eslint.config.mjs 파일도 수정내역이 있습니다.
기타 컴포넌트에 대한 내용은 스토리북으로 확인 부탁드립니다.
Issue
Scope
포함
특이사항